<template>
  <v-card
    flat
    color="#79839B"
    class="CustomFilter-container rounded-0 pt-8"
    min-height="560"
  >
    <v-spacer class="text-left">
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Project</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Job</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Task</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Project Manager</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">PIC </v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Quotation</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Location</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Item</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Contact Type</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="2" class="white-text label">Remark</v-col>
          <v-col offset="1" :cols="9">
            <v-text-field
              solo
              hide-details
              flat
              dense
              class="white-space rounded-pill"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
      <v-col class="d-flex justify-end px-4">
        <v-btn
          width="114"
          height="32"
          color="#ECEDEE"
          elevation="0"
          class="rounded-pill"
          @click="clear"
        >
          Clear
        </v-btn>
        <v-btn
          width="114"
          height="32"
          color="#EB9B31"
          elevation="0"
          class="white-text ml-3 rounded-pill"
          >Search</v-btn
        >
      </v-col>
    </v-spacer>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({
  components: {},
})
export default class CustomFilter extends Vue {
  dialog = false;

  clear() {
    this.$emit("close");
  }
}
</script>

<style lang="scss" scoped>
@import "./CustomFilter.scss";
</style>
